<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript">
function getCookie_( name ){
   var nameOfCookie = name + "=";
   var x = 0;
   while ( x <= document.cookie.length ){
        var y = (x+nameOfCookie.length);
        if ( document.cookie.substring( x, y ) == nameOfCookie ) {
             if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                  endOfCookie = document.cookie.length;
             return unescape( document.cookie.substring( y, endOfCookie ) );
        }
        x = document.cookie.indexOf( " ", x ) + 1;
        if ( x == 0 )
            break;
    }
	return "";
}
var group = [];
<c:if test="${group !=null && fn:length(group)>0 }">
	<c:forEach var="map1" items="${group}" varStatus="status">
	group.push({pg_no :"${map1.pg_no}",group_nm:"${map1.group_nm}"});
	</c:forEach>
</c:if>

// id="divPop" style="position: absolute;top:10px; left:30px;background-color: white;">
// <ul id="ulList" style="margin: 10px;">
// 	<li>A구역 (10/20)</li>
// 	<li>A구역 (10/20)</li>
// 	<li>A구역 (10/20)</li>
// </ul>

$(document).ready(function(){
	if(""!="${msg}"){
		alert("${msg}");
	}

	
	//팝업이미지 있으면 띄우기
	if("Y"!=getCookie_("popnew")){
	<c:if test="${pensionInfo.event_img !=null && ''!=pensionInfo.event_img }">
		<c:if test="${eventW !=null && ''!=eventW }">
			<c:if test="${eventH !=null && ''!=eventH }">
			var popLeft = $(window).width()/2-($("#layerPopup").width()/2);
			var popTop = $(window).height()/2-($("#layerPopup").height()/2);
			
			$("#layerPopup").css("top",popTop+"px");
			$("#layerPopup").css("left",popLeft+"px");

			$("#layerPopup").show();
			
			</c:if>
		</c:if>
	</c:if>
	}
	
	var dptop = $(".iReserCal").offset().top+$(".iReserCal").height();
	$("#divPop").css({top:dptop});
	
	$(".overShow").mouseover(function (event){
		
// 		ulList
		var html = "";
		for(var i=0;i < group.length;i++){
// 			$(this).attr("group_cnt1")
			var map = group[i];
			if($(this).attr("cnt"+map.pg_no)){
				
			}else{
				break;
			}
			selDate=$(this).attr("date");
			html+="<li><a href='#' onclick=\"goPage('";
			html+=$(this).attr("date");
			html+="','";
			html+=map.pg_no;
			html+="');\">";
			html+=map.group_nm;
			html+=" ("+$(this).attr("cnt"+map.pg_no)+"/"+
			$(this).attr("group_cnt"+map.pg_no)+")";
			html+="</a></li>";
			
			var polyTxt = map.group_nm + " ("+$(this).attr("cnt"+map.pg_no)+"/"+
			$(this).attr("group_cnt"+map.pg_no)+")";
			
			for(var j=0;j<g_txt.length;j++){
				if(map.pg_no == g_txt[j].pg_no){
					g_txt[j].attr({text:polyTxt});
				}
			}
			
		}
		if(html==""){
			html+="예약가능한 곳이 없습니다";
		}
		$("#ulList").html(html);
		$("#divPop").css({left:$(this).offset().left});
		$("#divPop").show();
		
// 		
	}).mouseout(function (){
// 		$("#divPop").hide();
	});

});
var selDate = "";
var g_txt = [];

$(window).load(function() {

	var img = document.getElementById("photo");
	
    var newImg = new Image();
    newImg.src = img.src;
    var height = newImg.height;
    var width = newImg.width;
    
	var paper = Raphael("canvas", width, height);
	
    img.style.display = "none";
//     var r = Raphael("holder", 600, 540);
    var width, height;  
    
    paper.image(img.src, 0, 0, width, height);

    
<c:if test="${group !=null && fn:length(group)>0 }">
	<c:forEach var="map1" items="${group}" varStatus="status">
	var polyon = getPolygon("${map1.coord}");//"M10 10L20 10L50 30L10 50L10 10";
    var comb = paper.path(polyon).attr({fill:"rgb(255,255,193)",opacity: .5});
    comb.p_id = "${map1.p_id}";
    comb.pg_no = "${map1.pg_no}";
    
    comb.mouseover(function(event){
        this.attr({fill:"rgb(255,128,64)"});
    });
    comb.click(function(event){
		if(selDate!=""){
			location.href="./petc0101Q.do?p_id="+this.p_id+"&reservation_dt="+selDate+"&pg_no="+this.pg_no;	
		}
    });
    comb.mouseout(function(event){
        this.animate({fill:"rgb(255,255,193)"},500);
    });
    var attr = {font: "20px Helvetica", opacity: 0.5};
    var fPoint = getCenter("${map1.coord}");
    g_txt.push(paper.text(fPoint.x, fPoint.y, "${map1.group_nm}").attr(attr).attr({fill: "#0f0"}));
    g_txt[g_txt.length-1].pg_no = "${map1.pg_no}";
	</c:forEach>
</c:if>
});


function getPolygon(paramPath){
	var polygon = "";
	var arList = paramPath.split(",");
	for(var i = 0; i< arList.length;i++){
		var coord = arList[i].split(" ");
		if(i==0){
			polygon+="M"+coord[0]+" "+coord[1];
		}else{
			polygon+="L"+coord[0]+" "+coord[1];
		}
	}
	return polygon;
}

function getCenter(paramPath){
	var returnPoint = {x:0,y:0, minX:0, maxY:0,minX:0,maxY:0};
	var arList = paramPath.split(",");
	
	for(var i = 0; i< arList.length;i++){
		var coord = arList[i].split(" ");
		if(i==0){
			returnPoint.minX=Number(coord[0]);
			returnPoint.minY=Number(coord[1]);
			returnPoint.maxX=Number(coord[0]);
			returnPoint.maxY=Number(coord[1]);
		}else{
			if(Number(coord[0]) > returnPoint.maxX){
				returnPoint.maxX = coord[0];
			}
			if(Number(coord[0]) < returnPoint.minX){
				returnPoint.maxX = coord[0];
			}
			if(Number(coord[1]) > returnPoint.maxY){
				returnPoint.maxY = coord[1];
			}
			if(Number(coord[1]) < returnPoint.minY){
				returnPoint.minY = coord[1];
			}
		}
	}
	returnPoint.x = (Number(returnPoint.minX)+Number(returnPoint.maxX)) /2
	returnPoint.y = (Number(returnPoint.minY)+Number(returnPoint.maxY)) /2
	return returnPoint;
}

function goPage(dt, pg_no){
	location.href="./petc0101Q.do?p_id=${param.p_id}&reservation_dt="+dt+"&pg_no="+pg_no;
}

//팝업숨기기
function closeMe(){
	$("#layerPopup").hide();
}

//쿠키설정후 팝업숨기기
function cookieSet(dayNum)
{
	var oDate, expiresDate;
	oDate = new Date();
	oDate.setDate(oDate.getDate() + dayNum);        
	expiresDate = oDate.toGMTString();
	document.cookie = "popnew=Y; expires=" + expiresDate + "; path=/;";
	closeMe();
}

function goNextMonth(nextNum){
	var nDt = new Date();
	nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
	nDt.addMonths(nextNum);

	var nowDt =new Date();
// 	var nDt = new Date();
	if(Number(nowDt.toString("yyyyMMdd")) > Number(nDt.toString("yyyyMMdd"))){
		alert("오늘 이전자료는 선택할수 없습니다.");
		return false;
	}
	location.href="./petc100Q.do?p_id=${param.p_id}&reservation_dt="+nDt.toString("yyyyMMdd")+"&pg_no=${param.pg_no}";
}
</script>
			<p>이미지위에 마우스를 올리시면 예약 가능한 사이트가 표시됩니다.<br>
				<img alt="" src="/camping/img/img_r_r.gif">	예약가능 
				<img alt="" src="/camping/img/img_r_i.gif"> 예약진행중 
				<img alt="" src="/camping/img/img_r_o.gif"> 예약완료
			</p>
			
			<table style="width: 100%">
				<tr>
					<td colspan="7" style="text-align: center;">
						<div>
							<a href="#" onclick="goNextMonth(-1)"><img alt="" src="/camping/img/calendar_arrow_l.jpg"  style="vertical-align:top; padding-top: 12px;padding-right: 10px;"></a>
							<strong style="font-size: 25px;font-weight: bold;font-family: Arial Black">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월</strong>
							<a href="#" onclick="goNextMonth(1)"><img alt="" src="/camping/img/calendar_arrow_r.jpg" style="vertical-align:top; padding-top: 12px;padding-left : 10px;"></a>
							<div style="padding-left: 0px;float: right;padding-top: 19px;"><strong style="color: #ff9f52; ">TODAY : ${nDtAll }</strong></div>
						</div>
					</td>
				</tr>
			</table>
			<table class="iReserCal" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
			${txtCal }
			</table>
			<div id="canvas">
				<img id="photo" src="${pensionInfo.c_back_img }"  alt="Test" />
			</div>
			
<!-- 			<table  style="width: 100%;margin-top: 10px;" border="1" cellspacing="6" cellpadding="1" bgcolor="#edecec" > -->
<!-- 				<tr> -->
<!-- 					<td valign="top"> -->
<!-- 						<div> -->
<%-- 							<img alt="" src="${pensionInfo.c_back_img }" border="0"> --%>
<!-- 						</div> -->
<!-- 					</td> -->
<!-- 				</tr> -->
<!-- 			</table> -->
			
			<div id="divPop" style="position: absolute;top:10px; left:30px;background-color: white;display: none;">
				<ul id="ulList" style="margin: 10px;">
					<li>A구역 (10/20)</li>
					<li>A구역 (10/20)</li>
					<li>A구역 (10/20)</li>
				</ul>
			</div>
			
<div id="layerPopup"
	style="position: absolute; left: 50px; top: 50px; display: none; border: 0px; border-color: black; background-color: white;">
	<table border="1" style="border-style: solid;">
		<tr>
			<td>
				<div style="" align="center">
					<img src="${pensionInfo.event_img}" />
				</div>
				<div style="padding: 2px;">
					<span style="float: left"><a href="#" onclick="closeMe();">닫기</a></span>
					<span style="float: right"><a href="#"
						onclick="cookieSet(1);">하루동안 열지 않기</a></span>
				</div>
			</td>
		</tr>
	</table>
</div>